import React, { useState,useEffect } from 'react'
import withStyles from 'react-jss';

import logo from './logo.svg'
import Demo from '/@/demo/Demo';
import './App.css'

const globals = {
  '@global': {
      html: `
        height: 100%;
        width: 100%;
      `,
      body:`
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        font-size: 20px;
        background-color: green;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
          'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
          sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      `,
      '#root': `
        height: 100%;
      `
    }
  };

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    fetch('/api/todos/1')
  .then(response => response.json())
  .then(json => console.log(json.title))
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello Vite + React!</p>
        <p>
          <span>Count is {count}</span>
          <button onClick={() => setCount(count => count + 1)}> + </button>
          <button onClick={() => setCount(count => count - 1)}> - </button>
        </p>
        <p>
          Edit <code>App.tsx</code> and save to test HMR updates.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Demo/>
      </header>
    </div>
  )
}

export default withStyles(globals)(App);

